<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>报修管理系统</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="/lib/layui-v2.5.6/layui/css/layui.css">
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="/lib/layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
          </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                    	<!-- 条件搜索 -->
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="contrller" id="status">
                                        <option value="">报修状态</option>
                                        <option value="1">进行中</option>
                                        <option value="2">结束</option>
                                        <option value="3">撤销</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="contrller" id="appt">
                                        <option value="">预约方式</option>
                                        <option value="1">上门服务</option>
                                        <option value="2">到店维修</option>
                                        <option value="3">邮寄</option>
                                    </select>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" id="search" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
<!--                             <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> -->
                            <button class="layui-btn" onclick="xadmin.open('添加报修记录','/rec-add.html',600,700)"><i class="layui-icon"></i>添加</button>
                        </div>
                        <!-- 设备信息 -->
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form" lay-fliter="recTable">
                                <thead>
                                  <tr>
<!--                                     <th> -->
<!--                                       <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary"> -->
<!--                                     </th> -->
                                    <th>报修记录</th>
                                    <th>报修时间</th>
                                    <th>预约方式</th>
                                    <th>预估价格</th>
                                    <th>预计维修完成时间</th>
                                    <th>报修状态</th>
                                    <th>报修设备信息</th>
                                    <th>操作</th>
                                </thead>
                                <tbody id="repairRecInfos">
                                  <tr>
										<th colspan='8' style="text-align:center;">暂无记录</th>
                                  </tr>
                                </tbody>
                            </table>
                        </div>
						

						<div id="userInfo" style="display:none;"> 
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">姓名:</label>
									<div class="layui-input-block">
										<input type="text" name="userName"  autocomplete="off" lay-verify="required" placeholder="客户姓名" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">手机号:</label>
									<div class="layui-input-block">
										<input type="text" name="userMobilephone" lay-verify="required|phone" placeholder="手机号" autocomplete="off" class="layui-input">
									</div>
								</div>
							    <div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit="" lay-filter="subbmit">确认</button>
									</div>
							    </div>	
							</form>
						</div> 
						
						
                       	<!-- 分页导航 -->
                        <div class="layui-card-body ">
                            <div class="page">
                                <div id="nav">
                               
                                </div>
                            </div>
                        </div>
                        
                        <script type="text/javascript">
                        		var page1 = 1;
                        		var psize1 = 5;
                        	
                        		
                            	//删除记录
                            	function deleteRec(recRepId){
                        			$.ajax({
                        				type:"get",
                        				url:"http://localhost:8080/record/updateStatus.do",
                        				data:{
                        					"id":recRepId,
                        				},
                        				dataType:"json",
                        				success:function(response){
                        					if(response.status == 0){
                        						window.location.reload();
                        					}
                        				}
                        			})
                            	}
                            	
                        		//分页查看
                            	function page(pn,ps){
                            		console.log("pn"+pn);
                            		console.log("ps"+ps);
                            		page1 = pn;
                            		psize1 = ps;
                            		$.ajax({
                                		type:"get",
                                		url:"http://localhost:8080/record/queryRecByDate.do",
                                		data:{
                                			"pageNum":pn,
                                			"pageSize":ps,
                                			"beginDate":$("#start").val(),
                                			"endDate":$("#end").val(),
                                			"repairStatus":$("#status").val(),
                                			"appointment":$("#appt").val(),
                                		},
                                		dataType:"json",
                                		success:function(response){
                                			console.log(response);
                                			var data = response.data.list;
                                			$("#repairRecInfos").empty();	
                                			if(data.length==0){
                                				alert("无记录");
                                				window.location.reload();
                                			}
                                			//分页数据
                                			for(var i=0;i<data.length;i++){
                                				var tr = $("<tr></tr>");
//                                  				tr.append("<td><input type='checkbox' name='id' value='"+data[i].id+"' lay-skin='primary'></td>");
                                    			tr.append("<td>"+data[i].id+"</td>");
                                    			tr.append("<td>"+data[i].repairTime+"</td>");
                                    			if(data[i].appointment==1){
                                 					tr.append("<td>上门服务</td>");
                                 				}
                                 				if(data[i].appointment==2){
                                 					tr.append("<td>到店维修</td>");
                                 				}
                                 				if(data[i].appointment==3){
                                 					tr.append("<td>邮递</td>");
                                 				}
                                				tr.append("<td>"+data[i].estPrice+"￥</td>");
                                				tr.append("<td>"+data[i].estCpmlTime+"</td>");
                                    			if(data[i].repairStatus==0){
                                 					tr.append("<td>进行中</td>");
                                 				}
                                				if(data[i].repairStatus==1){
                                 					tr.append("<td>进行中</td>");
                                 				}
                                 				if(data[i].repairStatus==2){
                                 					tr.append("<td>结束</td>");
                                 				}
                                 				if(data[i].repairStatus==3){
                                 					tr.append("<td>撤销</td>");
                                 				}
                                 				tr.append("<td style='justify-content:space-around;'><a href='rec-eqpt-add.html?id="+data[i].id+"'>添加设备</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='rec-eqpt-list.html?id="+data[i].id+"' target='_blank'>查看设备</a></td>");
                                				//tr.append("<td class='td-manage'><button><a title='编辑' href='rec-edit.html?id="+data[i].id+"'><i class='layui-icon'>&#xe642;</i></a></button><button><a title='删除' onclick='deleteRec("+data[i].id+")' href='javascript:;'><i class='layui-icon'>&#xe640;</i></a></button><button class='addBtn'><a title='生成客户确认单' href='rec-order.html?id="+data[i].id+"'><i class='layui-icon'>&#xe63c;</i></a></button></td>")
                                				tr.append("<td class='td-manage'><button><a title='编辑' href='rec-edit.html?id="+data[i].id+"'><i class='layui-icon'>&#xe642;</i></a></button><button><a title='删除' onclick='deleteRec("+data[i].id+")' href='javascript:;'><i class='layui-icon'>&#xe640;</i></a></button><button class='addBtn'><a title='生成客户确认单' href='rec-order.html?id="+data[i].id+"'><i class='layui-icon'>&#xe63c;</i></a></button></td>")
                                				$("#repairRecInfos").append(tr);	
                                			}
                                			// 分页导航栏
                                			var navs = response.data.navigatepageNums;
                                			$("#nav").empty();
                                			$("#nav").append("<a class='prev' onclick='page("+(page1-1)+","+psize1+")'>&lt;&lt;</a>");
                                			for(var i=0;i<navs.length;i++){
                                				$("#nav").append("<a class='num' onclick='page("+navs[i]+","+psize1+")'>"+navs[i]+"</a>");
                                			}
                                			$("#nav").append("<a class='next' onclick='page("+(page1+1)+","+psize1+")'>&gt;&gt;</a>");
                                		}
                                	})
                            	}
                        		
                            	$("#search").click(function(){
                            		page(page1,psize1);
//                             		window.location.reload();
                            		return false;
                            	})
                            	
                            	$(function(){
                            		page(page1,psize1);
                            	})	
                    	</script>

                    </div>
                </div>
            </div>
        </div>

    </body>
    <script>
      layui.use(['jquery','layer','element','laydate','form','table'], function(){
    	var $=layui.jquery;
    	var layer=layui.layer;
    	var element=layui.element;
    	var laydate = layui.laydate;
        var form = layui.form;
        var table=layui.table;
		
        //渲染表格
        table.render({
        	 elem: '#recTable'
        	,loading:true
			,text:{									//自定义文本，如空数据时的异常提示等
				none:'暂无相关数据'					//默认：无数据
			}
        });
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });

      });
    </script>
</html>